<!-- 万里汇叫Novalink星汇卡管理 -->
/**
 *  
 */
<template>
  <div v-if="isCard">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>Novalink星汇卡</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock"> 
      <div class=""> 
           <!-- 搜索筛选 -->
          <el-form :inline="true" :model="formInline" class="user-search">  
            <el-form-item label="">
              <el-input
                size="small"
                v-model="formInline.cardNo"
                placeholder="输入卡号后四位"
                type="number"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-select
                size="small"
                v-model="formInline.cardStatus" 
                placeholder="请选择卡状态"
                clearable
              > 
                <el-option 
                  label="可用"
                  value="ACTIVE" 
                ></el-option>
                <el-option 
                  label="冻结" 
                  value="FROZEN" 
                ></el-option>
                <el-option 
                  label="销卡" 
                  value="CANCEL" 
                ></el-option>
              </el-select>
            </el-form-item> 

            <el-form-item>
              <el-date-picker
                v-model="value1"
                size="small"
                type="datetimerange"
                value-format="timestamp"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="createdData"
              >
              </el-date-picker>
            </el-form-item> 
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search"
              >
                搜索
              </el-button>
              <el-button
                    size="small"
                    type="success"
                    icon="el-icon-plus"
                    @click="openCard('addForm')"  
                    >快速开卡</el-button
                  >
                <el-button
                  size="small"
                  type="danger"
                  @click="isfreezeEdits('冻结', 'freeze')"
                  :disabled="changeIDList.length == 0" 
                  class="deepC"
                >

                  批量冻结
                </el-button>
                <el-button
                  size="small"
                  type="warning"
                  @click="isfreezeEdits('解冻', 'unfreeze')"
                  :disabled="changeIDList.length == 0" 
                  class="deepC"
                >
                  批量解冻
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="deleteEdits()"
                  :disabled="changeIDList.length == 0" 
                  class="deepg"
                >
                  批量销卡
                </el-button>
                <el-button size="small" type="primary" icon="el-icon-download" @click="exportEx()" >
                  导出
                </el-button>
            </el-form-item> 
          </el-form> 
      </div>  
    <!--列表-->
    <div class="ra_box"> 
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%" 
        @selection-change="toggleSelection"
      >
        <el-table-column type="selection" width="55"> </el-table-column>   
        <el-table-column prop="cardNo" label="卡号"  width="205" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{ scope.row.cardNo }}  <i class="el-icon-document-copy copyBtn"   @click="copyText(scope.row.cardNo)"></i></div>
            </template>
          </el-table-column> 
          <el-table-column
            prop="cardNickName"
            label="卡昵称"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>
         <el-table-column
            prop="contactEntityId"
            label="持卡人Id"
            show-overflow-tooltip
            min-width="240"
          >
         </el-table-column>
         <el-table-column
            prop="cardStatus"
            label="卡状态"
            show-overflow-tooltip
            width="120"
          >
          <template slot-scope="scope"> 
            {{ scope.row.cardStatus=='ACTIVE'?'可用':scope.row.cardStatus=='FROZEN'?'冻结':'销卡' }}
            <!-- // 可用，冻结，销卡 -->
          </template>
         </el-table-column>
         <!-- ACTIVE,FROZEN,CANCEL -->

         <el-table-column
            prop="groupName"
            label="分组名称"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>
         <el-table-column
            prop="maskedCardNo"
            label="脱敏卡号"
            show-overflow-tooltip
            width="160"
          >
         </el-table-column>
         <el-table-column
            prop="requestId"
            label="请求流水号"
            show-overflow-tooltip
            width="230"
          >
         </el-table-column>  
         
        <el-table-column
             prop="cardBrand"
            label="卡片品牌"
            show-overflow-tooltip
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="cardHolderFirstName"
            label="持卡人名字"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column> 
         <el-table-column
            prop="cardHolderLastName"
            label="持卡人姓氏"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>
         <el-table-column
            prop="cardLimitDetail"
            label="卡片限额信息"
            show-overflow-tooltip
            width="120"
          >
          <template slot-scope="scope"> 
              <span @click="lookDetails(scope.row)"><i class="el-icon-view" ></i>查看</span> 
            </template>
         </el-table-column>

         <el-table-column
            prop="cvv"
            label="cvv号"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>

         <el-table-column
            prop="expiredMonth"
            label="卡片过期月份"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>

         <el-table-column
            prop="expiredYear"
            label="卡片过期年份"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column> 

        <el-table-column
          prop="createdAt"
          label="创建时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ timestampToTime(scope.row.createdAt, 8 * 60 * 60) }}
          </template>
        </el-table-column> 

        <el-table-column prop="remark" label="备注" show-overflow-tooltip>
      </el-table-column>
        <el-table-column align="center" label="操作" width="360">
          <template slot-scope="scope">  
            <el-button size="mini"   plain  @click="changCard(scope.row)">
              查看
            </el-button>  
            <el-button
              type="warning" plain  size="mini" 
              @click="isfreezeEdit('冻结', 'freeze', scope.row)"
              :disabled="scope.row.cardStatus != 'normal'"
              style="color: #f74e4e; cursor: pointer;"
            >
              冻结
            </el-button>
            <el-button
              type="success" plain  size="mini" 
              @click="isfreezeEdit('解冻', 'unfreeze', scope.row)"
              :disabled="scope.row.cardStatus != 'frozen'"
              style="color: #67C23A; cursor: pointer;"
            >
              解冻
            </el-button>
            
            <!-- <el-button
                plain 
                size="mini" type="primary"  
              @click="updateCard(scope.row.cardId)"
              style="color: #fff;"
            >
              更新
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
    <!-- 卡详情界面 -->
    <el-dialog
      title="查看"
      :close-on-click-modal="false"
      :visible.sync="addFormVisible"
      width="65%"
      @close="closeDialog('addForm')"
    >
      <el-row :gutter="20">
        <el-col :span="12"> 
          <el-form label-width="120px" :model="addForm" ref="addForm">
            <el-form-item label="卡ID" prop="cardId">
              {{ addForm.cardId }}
            </el-form-item>
            <el-form-item label="卡号" prop="cardType">
              {{ addForm.cardNo }}
            </el-form-item>
            <el-form-item label="卡类型" prop="cardType">
              {{ addForm.cardType == "recharge" ? "常规卡" : "共享卡" }}
            </el-form-item>
            <el-form-item label="卡Bin" prop="cardBin">
              {{ addForm.cardBin }}
            </el-form-item>
            <el-form-item label="卡币种" prop="cardCurrency">
              {{ addForm.cardCurrency }}
            </el-form-item>
            <el-form-item label="卡状态" prop="cardStatus">
              {{ cardTypeData[addForm.cardStatus] }}
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                size="small"
                v-model.trim="addForm.remark"
                :rows="5"
                auto-complete="off"
                placeholder="备注"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form label-width="120px" :model="addForm" ref="addForm">
            <el-form-item label="卡金额" prop="cardBalance">
              {{ b(addForm.cardBalance) }}
            </el-form-item>
            <el-form-item label="有效期" prop="expirationDate">
              {{ addForm.expirationDate ? addForm.expirationDate : "-" }}
            </el-form-item>
            <el-form-item label="CVV"> 
              <i class="el-icon-view" v-if="cvvShow" @click="getShowCvv(addForm)"></i> 
              <label v-else>{{ CVV ? CVV : "卡失效" }}</label>
            </el-form-item>
            <el-form-item label="省份/洲" prop="billingCity">
              {{ addForm.billingCity }}
            </el-form-item>
            <el-form-item label="城市" prop="billingCity">
              {{ addForm.billingCity }}
            </el-form-item>
            <el-form-item label="详细地址" prop="billingAddress">
              {{ addForm.billingAddress }}
            </el-form-item>
            <el-form-item label="邮政编码" prop="billingPostalCode">
              {{ addForm.billingPostalCode }}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addForm')">取消</el-button>
      </div>
    </el-dialog> 

    <!-- 开卡 -->
    <el-dialog
      title="快速开卡"
      :close-on-click-modal="false"
      :visible.sync="addCardVisible"
      width="65%"
      @close="closeDialog('addCardForm')"
    >
      <el-form
        label-width="120px"
        :model="addCardForm"
        :rules="rulesAddCard"
        ref="addCardForm"
      >
           <!-- <el-form-item label="钱包余额" prop="balance"  v-if="formInline.cardType=='recharge'&&userInfo">
              {{ b(userInfo.balance) }}
            </el-form-item> 
            <el-form-item label="共享卡钱包余额" prop="balance"  v-if="formInline.cardType=='share'&&userInfo">
              {{ b(userInfo.matrixBalance) }}
            </el-form-item>   -->
            <el-form-item
              label="卡昵称"
              prop="cardNickName" 
            >
              <el-input
                size="small"
                v-model="addCardForm.cardNickName"
                auto-complete="off"
                placeholder="请输入卡昵称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="开卡数量"
              prop="cardNum" 
            >
            <el-input-number v-model="addCardForm.cardNum" :min="1"></el-input-number>
            </el-form-item> 
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                size="small"
                v-model.trim="addCardForm.remark"
                :rows="5"
                auto-complete="off"
                placeholder="备注"
              ></el-input>
            </el-form-item> 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addCardForm')"
          >取消</el-button
        >
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitFormCard()"
          >保存</el-button
        >
        <!-- @click="verArry.includes('/api/wf/cardApply')?FormCardVer('noraml'):submitFormCard()" -->
      </div>  
    </el-dialog> 

    <!-- 设置限额 --> 
    <el-dialog
      :close-on-click-modal="false"
      title="设置限额"
      :visible.sync="setLimitVisible"
      width="40%"
      @close="closeDialog('limitForm')"
    > 
      <el-form :model="LimitForm" ref="limitFormRef" :rules="editRules">  
        <el-form-item >  
          <div>
            单笔交易最大金额 
            <el-tooltip class="item" effect="dark" content="您可设置这张卡的单笔交易限额，当单笔交易金额超过您设置的限额后将交易失败。" placement="top-end">
              <i class="el-icon-question" title="ttrtr"></i>
            </el-tooltip>   
          </div>
          <el-input placeholder="推荐单笔最大交易额度50,000000" v-model="LimitForm.maxOnPercent" type="number" min="1" max="50000000" @input="validateInput($event, 'maxOnPercent')"> 
            <template slot="append">USD</template>
          </el-input>   
        </el-form-item>
        <el-form-item>  
          <div>
            日交易限额 
            <el-tooltip class="item" effect="dark" content="您可设置这张卡的日交易限额，当日交易超过您设置的限额后将交易失败，次日将再次可用。" placement="top-end">
              <i class="el-icon-question" title="ttrtr"></i>
            </el-tooltip>   
          </div>
          <el-input placeholder="推荐每日最大交易额度50,000,000" v-model="LimitForm.maxOnDaily"  type="number" min="1" max="50000000"  @input="validateInput($event, 'maxOnDaily')">
            <template slot="append">USD</template>
          </el-input> 
        </el-form-item>
        <el-form-item>  
          <div>
            月交易限额 
            <el-tooltip class="item" effect="dark" content="您可设置这张卡的月交易限额，当月交易超过您设置的限额后将交易失败，次月将再次可用。" placement="top-end">
              <i class="el-icon-question" title="ttrtr"></i>
            </el-tooltip>   
          </div>
          <el-input placeholder="推荐每月最大交易额度100,000,000" v-model="LimitForm.maxOnMonthly"  type="number" min="1" max="50000000"  @input="validateInput($event, 'maxOnMonthly')">
            <template slot="append">USD</template>
          </el-input> 
        </el-form-item> 
        
        <el-form-item >  
          <div style="display:flex; justify-content:space-between">
            <div>
              交易限额 
              <el-tooltip class="item" effect="dark" content="交易限额为您允许此卡用于交易的总额度(金额)，可查看“剩余额度”即此卡还可用于交易的额度，当此额度为0将不可消费。您可根据需要对交易限额进行调整，也可设为不限。" placement="top-end">
                <i class="el-icon-question" title="ttrtr"></i>
              </el-tooltip>  
            </div>
            <div>
              剩余额度：{{ LimitForm.availableTransactionLimit || '-' }}
            </div> 

          </div>
          <el-input placeholder="不限" v-model="LimitForm.totalTransactionLimit" type="number" :min="1" :max="50000000" @input="validateInput($event, 'totalTransactionLimit')">
            <template slot="append">USD</template>
          </el-input> 
        </el-form-item>   
      </el-form>

      
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('limitForm')"> 
          取消
        </el-button>
        <el-button
          size="small"
          type="primary"
          :disabled="disabled"
          class="title"
          @click="limitsubmitForm()"
          >提交</el-button
        >
      </div> 
    </el-dialog>
     <!-- 查看详情 -->
     <el-dialog
        :close-on-click-modal="false"
        title="限额详情"
        :visible.sync="setLimitShowVisible"
        width="40%"
        label-width="180px"
        @close="setLimitShowVisible=false"
      >
        <el-form :model="curLimitForm" ref="limitFormRef">  
          <!-- <el-form-item label="是否限制可交易额度："   >  
            {{ curLimitForm.transactionLimitType=='limited'?'限额':'不限额' }} 
          </el-form-item>  -->
          <el-form-item label="单笔交易最大金额：" >  
            {{ curLimitForm.maxOnPercent || '-' }}
          </el-form-item> 
          <el-form-item label="日交易限额："  >  
            {{ curLimitForm.maxOnDaily || '-' }}
          </el-form-item> 
          <el-form-item label="月交易限额："  >  
            {{ curLimitForm.maxOnMonthly || '-' }}
          </el-form-item> 
          
          <el-form-item label="交易限额：" >  
            {{ curLimitForm.totalTransactionLimit || '-' }}
          </el-form-item> 
          <el-form-item label="剩余额度：" >  
            {{ curLimitForm.availableTransactionLimit || '-' }}
          </el-form-item>   
        </el-form> 
      </el-dialog>  
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" @refresh="getdata(formInline)"></codeChoose>
  </div>
  <div v-else>
    <WLHcardUserItem :card-info="addForm" ></WLHcardUserItem>
  </div> 
</template>

<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import WLHcardUserItem from "./WLHcardUserItem.vue";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  timestampToTime,
  timestampSubTime,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  service,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  format,
  getUrl,
  reqJson
} from "../../api/axiosFun";
 
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      addCardForm:{
        cardNum:1
      },
      isCard:true,
      addCardVisible:false,
      rulesAddCard:{
        cardNickName:[{ required: true, message: "请输入卡昵称", trigger: "blur" }],
        cardNum:[{ required: true, message: "请输入数量", trigger: "blur" }],
      },
      loading: false,
      cardInfo: "",
      disabled: false,
      addFormVisible: false,
      changeIDList: [],
      b: format,
      timestampToTime: timestampToTime,
      iDList: { cardId: [], userId: [] }, 
      cardTypeData: {
        normal: "可用",
        pending_recharge: "待转入",
        unactivated: "未激活",
        freezing: "冻结中",
        frozen: "冻结",
        risk_frozen: "风控冻结",
        system_frozen: "系统冻结",
        unfreezing: "解冻中",
        expired: "过期",
        canceling: "销卡中",
        cancelled: "销卡",
      },
      addForm: {},
      CVV: "",
      value1: "",
      formInline: {
        pageNum: 1,
        pageSize: 10,
        cardNo: "",
        cardStatus: "",
        userId: "",
        createdAtStart: "",
        createdAtEnd: "",
      },
      listData: "",
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission:false,
      userInfo:{},
      headers:'',
      verArry:[],
      verType:'',
      curItem:'', 
      totalStatus:'',
      cvvShow:true,

      userIDList:[],
      cardVisible:false,
      setLimitVisible:false,
      LimitForm:{}, 
      curLimitForm:{},
      setLimitShowVisible:false,
      setGroupShowVisible:false,
      editRules: {
        
        remark: {
          required: true,
          message: "请输入备注",
          trigger: "blur",
        },
      },

    };
  },
  // 注册组件
  components: {
    Pagination,
    codeChoose,
    WLHcardUserItem
  },
  computed: {
    ...mapGetters(["getUser"]), 
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal); 
    },
  }, 
  created() {
    this.getdata(this.formInline);
    this.cvv=null
    if(this.$store.state.user){
      this.userInfo = JSON.parse(this.$store.state.user); 
      if(this.userInfo&&this.userInfo.verifyApi){
        this.verArry =  this.userInfo.verifyApi.split(',');
      }  
    }   
  },
  methods: {  
    validateInput(value,type) {
      // 将输入值转换为数字，如果转换失败则设置为null
      const numValue = Number(value);
      if (isNaN(numValue)) {
        this.LimitForm[type] = null;
        // this.errorMessage = '请输入一个有效的数字';
      } else if (numValue > 50000000) {
        this.LimitForm[type] = 50000000; // 或者你可以选择设置为null或其他默认值
        this.$message.error(spStr('输入值不能超过50000000', "PhotonPay", "")); 
      } else {
         
      }
    },
    lookDetails(item){ 
      this.setLimitShowVisible = true;
      this.curLimitForm = item;
    }, 
    submitFormCard(){ 
      let url = getUrl({
        cardNickName:this.addCardForm.cardNickName,
        cardNum:this.addCardForm.cardNum,
        remark:this.addCardForm.remark
      });   
      reqJson('post',"/api/wf/cardApply"+url, { 
        // cardNickName:this.addCardForm.cardNickName,
        // cardNum:this.addCardForm.cardNum,
        // remark:this.addCardForm.remark
      },{
        headers:{
          ...this.headers
        }
      })     
      .then((res) => {
        if (res.code == 0) {
          this.addCardVisible = false;
        } else {
          this.$message({
            type: "info",
            message: spStr(res.msg, "PhotonPay", ""),
          });
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });
    },
    openCard(){
      this.addCardVisible = true;
    }, 
    getParam(val,type){ 
      this.headers = val 
      if(type=="freezeCard" || type=="unFreezeCard"){  
        this.editFreezeCard();
      }else if(type=="freezeCards" || type=="unFreezeCards"){
        this.editIsfreezeEdits();
      }else if(type=='cvv'){
        this.getCvv(this.curItem);
      }
    }, 
    exportEx() { 
      let url = getUrl(this.formInline);
      service
        .post("/api/admin/exportBudgetTransferRecordList" + url, {})
        .then((res) => {
          this.loading = false; 
          if (res.code == 0) {
            window.open(
              baseURL + "/common/download?fileName=" + res.msg,
              "_blank"
            );
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    createdData() {
      if (this.value1) {
        this.formInline.createdAtStart = timestampSubTime(
          this.value1[0]
        );
        this.formInline.createdAtEnd = timestampSubTime(
          this.value1[1]
        );
      } else {
        this.formInline.createdAtStart = "";
        this.formInline.createdAtEnd = "";
      }
    },
    getdata(parameter) {
      let url = getUrl(parameter);   
      service
        .get("/api/wf/cardList" + url, {})  
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          // this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.pageNum = parm.currentPage;
      this.formInline.pageSize = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    changCard(row) {
      // this.addFormVisible = true;
      this.isCard = false;
      this.addForm = row;
      this.getCvv(row);
      // this.getcardInfo(row);
    },
    getcardInfo(row){
      reqJson('get',"/api/wf/cardInfo?assetId="+row.assetId, { 
        // assetId:row.assetId
      },{
        headers:{
          ...this.headers
        }
      })     
      .then((res) => {
        if (res.code == 0) {
          this.addForm = res.data;
        } else {
          this.$message({
            type: "info",
            message: spStr(res.msg, "PhotonPay", ""),
          });
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });
    },
    getShowCvv(row){ 
      if(this.verArry.includes('/api/wf/getCvv')){
        this.verType = 'cvv';
        this.curItem = row
        this.$refs.codeRef.openDialog(); 
        this.cvvShow = false;
      }else{
        this.getCvv(row)
      }
    },
    getCvv(row) {   
      reqJson('get',"/api/wf/getCvv?assetId=" + row.assetId, { 
      },{
        headers:{
          ...this.headers
        }
      })     
      // service
      //   .get("/api/admin/getCvv?cardId=" + row.cardId, {})
        .then((res) => {
          if (res.code == 0) {
            this.addForm.expirationDate = res.data.expirationDate;
            this.CVV = res.data.cvv;
            this.cvvShow = false;
          } else {
            this.$message({
              type: "info",
              message: spStr(res.msg, "PhotonPay", ""),
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    isfreezeEdit(name, status, row) {
      this.curItem = row
      let that = this
      this.$confirm("请问您确定要" + name + "该卡吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => { 
            if(that.verArry.includes('/api/wf/freezeCard')&&this.curItem.cardStatus!= 'normal'){
              that.verType = 'freezeCard' 
              that.$refs.codeRef.openDialog(); 
            }else if(that.verArry.includes('/api/wf/unFreezeCard')&&this.curItem.cardStatus!= 'frozen'){
              that.verType = 'unFreezeCard' 
              that.$refs.codeRef.openDialog(); 
            }else{
              this.editFreezeCard();
            }   
            
        })
        .catch(() => { 
          this.$message({
            type: "info",
            message: "已取消" + name + "卡",
          });
        });
    },
    editFreezeCard(status){    
      let  url = status=='freeze'?'/api/wf/freezeCard':'/api/wf/unFreezeCard'  
      reqJson('post',url+"?cardId=" + this.curItem.cardId+'&userId='+ this.curItem.userId, {
        assetIds:[this.curItem.assetId]
      },{
        headers:{
          ...this.headers
        }
      })    
      .then((res) => {
        if (res.code == 0) {
          this.$message.success("操作成功，请等待...");
          this.getdata(this.formInline);
          this.updateCard(row.cardId);
        } else {
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
          return;
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });
    },
    updateCard(id) {
      service
        .post("/api/wf/cardRefresh?cardId=" + id, "")
        .then((res) => {
          if (res.code == 0) {
            this.getdata(this.formInline);
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog(formName) {      
      if(formName=='addCardForm'){
        this.addCardVisible = false
      }else{
        this.addFormVisible = false;
        this.CVV = null;
        this.cvvShow = true;
        this.addForm = {};
      }
    },
    toggleSelection(rows) {
      console.log(rows,'rows11111');
      console.log(this.changeIDList,'changeIDList');
      this.changeIDList = rows;
      this.iDList = { cardId: [], userId: [],cardStatusId:[] };
      rows.forEach((i) => {
        this.iDList.cardId.push(i.cardId);
        this.iDList.userId.push(i.userId);
        this.iDList.cardStatusId.push(i.cardStatus);
      });
    },
    isfreezeEdits(name, status) {
      this.totalStatus = status
      let that = this
      this.$confirm("请问您确定要" + name + "该卡吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {   
          // console.log(this.iDList.cardStatusId,this.totalStatus)
          let isMore = this.iDList.changeIDList.every(
            (element) => element.cardStatus === (this.totalStatus=='freeze'?'CANCEL':'FROZEN')
          );  

          // 卡状态(ACTIVE,FROZEN,CANCEL)
          
          if(!isMore&&this.totalStatus== 'freeze'){
            this.$message.error("请选择可用状态的卡，进行批量冻结操作！"); 
            return;
          }

          if(!isMore&&this.totalStatus== 'unfreeze'){
            this.$message.error("请选择冻结状态的卡，进行批量解冻操作！");
            return;
          }  
 
          let parms = {
              cardIds: this.iDList.cardId.toString(),
              status: status,
              userIds: this.iDList.userId.toString(),
            },
            url = getUrl(parms); 
            if(that.verArry.includes('/api/wf/freezeCards')&&this.totalStatus!= 'freeze'){
              that.verType = 'freezeCards' 
              that.$refs.codeRef.openDialog(); 
            }else if(that.verArry.includes('/api/wf/unFreezeCards')&&this.totalStatus!= 'unfreeze'){
              that.verType = 'unFreezeCards' 
              that.$refs.codeRef.openDialog(); 
            }else{
               
              this.editIsfreezeEdits();
            }  
 
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消" + name + "卡",
          });
        });
    },
    editIsfreezeEdits(){  
      let  url = this.totalStatus=='freeze'?'/api/wf/freezeCards':'/api/wf/unFreezeCards'   
      let parms = {
        assetIds: this.iDList.cardId.toString(),  
      } 
      reqJson('post',url+getUrl(parms), { 
        // ...parms
      },{
        headers:{
          ...this.headers
        }
      })    
      .then((res) => {
        if (res.code == 0) {
          this.$message.success("数据处理中，请稍后刷新列表查看...");
          this.getdata(this.formInline);
        } else {
          this.$message.error(spStr(res.msg, "PhotonPay", ""));
          return;
        }
      })
      .catch((err) => {
        this.$message.error(spStr(err, "PhotonPay", ""));
      });

    },
     // 销卡
     deleteEdits() {
      // this.$confirm("销卡后余额将退回到钱包余额,请问您确定要销卡吗?", "信息", {
      this.$confirm(
        `销卡后余额将退回到钱包余额,请问您确定要销卡吗?<div class="text-gray font12">除DC是实时销卡以外，其他卡片销卡完成需要8个工作日</div>`,
        "信息",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {  
          if(this.verArry.includes('/api/wf/cardCloses')){
            this.verType = 'xiaos' 
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editSaveAuthS(); 
          }  

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消销卡",
          });
        });
    },
    editSaveAuthS(){    
        reqJson('post',"/api/wf/cardCloses?cardIds=" + this.iDList.toString(),{},{
          headers:{
            ...this.headers
          }
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success("数据处理中，请稍后刷新列表查看...");
            this.getdata(this.formInline);
          } else {
            this.$message.error(spStr(res.msg, "PhotonPay", ""));
            return;
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        }); 
    },
    copyText(text) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch((err) => {
          // 复制失败
          console.error("复制失败");
        });
    },
  },
};
</script>

<style scoped> 
.user-search {
  margin-top: 20px;
}
.select10 .el-select {
  width: 100%;
}
/deep/ .el-table__body .hidden-row {
  display: none !important;
}

/deep/ .radio_box .el-radio-button .el-radio-button__inner {
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

/deep/ .radio_box .el-radio-button.is-active .el-radio-button__inner {
  box-shadow: 0px 0 0 0 #409eff;
}
.copyBtn:hover{
  color: #409eff;
  cursor: pointer;
}
</style>

 
 